<template>
  <div class="common-list-container__v2 task-manage-list-container column">
    <!-- start 头部搜索栏 -->
    <div class="header-container">
      <div class="common-list-header__v2">
        <div class="flex-x base-search-group input-with-append-search">
          <el-input v-model.trim="searchParams.keyword" :placeholder="$t('part.occupy.searchTip')" prefix-icon="el-icon-search" @keyup.enter.native="handleSearch">
            <el-button type="primary" slot="append" @click="handleSearch">{{ $t('common.base.search') }}</el-button>
          </el-input>
          <el-button class="ml_12" type="plain-third" @click="handleReset">{{ $t('common.base.reset') }}</el-button>
          <!-- 高级搜索 -->
          <div :class="['advanced-search-wrap', 'bg-w']">
            <advanced-search
              ref="advancedSearchRef"
              :fields="columns"
              :has-create="false"
              :has-save="false"
              :search-model="viewportSearchModel"
              :in-common-use="inCommonUse"
              @changeCommonUse="changeCommonUse($event, 'occupy_list_advanced')"
              @search="handleAdvancedSearch"
            />
          </div>
        </div>
      </div>

    </div>
    <!-- end 头部搜索栏 -->

    <div class="bbx-normal-pack-up">
    </div>

    <div class="task-manage-list-container-content">
      <OccupyTableList
        ref="occupyTableRef"
        :columns="columns"
        :params="searchParams"
        @handleSelectColumn="handleSelectColumn"
      >
        <div class="acenter" slot="time">
          {{ occupyTime }} {{$t('part.occupy.timeUpdate')}}
        </div>
      </OccupyTableList>
    </div>

    <!-- start 选择列 -->
    <biz-select-column ref="bizSelectColumnComponent" @save="saveSelectColumns($event, selectColumnStorageKey)" />
    <!-- end 选择列 -->
  </div>
</template>

<script>
/* components */
import OccupyTableList from '@src/modules/partV2/occupyList/components/OccupyTableList.vue';
import AdvancedSearch from '@src/component/AdvancedSearch/index.vue';
/* model */
import { ViewTypeComponentNameEnum } from '@src/modules/partV2/occupyList/model';
/* util */
import { getColumnFields } from '@src/modules/partV2/occupyList/model/fields';
/* hooks */
import { useSelectColumn } from '@src/modules/projectManage/projectManageList/hooks/useSelectColumn';
import { useAdvancedSearch } from "@src/modules/projectManage/projectManageList/hooks/useAdvancedSearch";
/* vue */
import { ref, onMounted, reactive, computed } from 'vue';
/* api*/
import { getStatisticsTime } from "@src/api/SparePart";

export default {
  name: 'occupy-list-page',
  components: {
    OccupyTableList,
    AdvancedSearch,
  },
  setup() {
    // 选择列
    const { columns, buildSelectColumns, saveSelectColumns } = useSelectColumn();
    // 高级搜索列
    const { viewportSearchModel, inCommonUse, changeCommonUse, recoverCommonUse } = useAdvancedSearch();

    // 备件占用表头
    const fields = ref(getColumnFields());

    // 选择列ref
    const bizSelectColumnComponent = ref(null);
    // 当前视图组件ref
    const occupyTableRef = ref(null);
    // 高级搜索ref
    const advancedSearchRef = ref(null);

    // 当前视图
    let currentView = ref(ViewTypeComponentNameEnum.Table);
    // 选择列缓存key
    const selectColumnStorageKey = computed(() => `${currentView.value}_select_column`);

    // 更新时间
    const occupyTime = ref()

    // 构建搜索参数
    const buildParams = () => {
      return {
        keyword: '',
        conditions: [],
        systemConditions: [],
      }
    }

    // 搜索参数
    let searchParams = reactive(buildParams());

    // 构建选择列
    const buildColumns = () => {
      const originFields = getColumnFields(fields.value, currentView.value);
      buildSelectColumns(originFields, selectColumnStorageKey.value);
    }

    // 选择列
    const handleSelectColumn = () => {
      bizSelectColumnComponent.value?.open(columns.value);
    };

    // 搜索
    const handleSearch = () => {
      occupyTableRef.value?.search(true);
    }

    // 重置搜索
    const handleReset = () => {
      Object.assign(searchParams, buildParams());

      // 重置高级搜索：会触发高级搜索事件handleAdvancedSearch
      viewportSearchModel.value = [];

      handleSearch();
    }

    async function toGetStatisticsTime() {
      try {
        const { data } = await getStatisticsTime();
        occupyTime.value = data;
      } catch (e) {
        console.error(e)
      }
    }

    /**点击高级搜索 */
    function handleAdvancedSearch(searchModel = {}) {
      const { systemConditions = [] } = searchModel;

      searchParams.systemConditions = systemConditions?.map(item => {
        if(item.property === 'executorUser') {
          item.property = 'executor'
        }else if(item.property === 'serviceContentText') {
          item.property = 'serviceContent'
        }else if(item.property === 'serviceTag' && item.inValue?.length) {
          item.inValue = item?.inValue?.map(item => item.tagName) ?? []
        }
        return item;
      });
      handleSearch();
    }

    onMounted(() => {
      // 恢复常用
      recoverCommonUse('occupy_list_advanced');
      // 构建选择列数据
      buildColumns();
      // 查询时间
      toGetStatisticsTime();
    });

    return {
      occupyTime,
      bizSelectColumnComponent,
      currentView,
      occupyTableRef,
      selectColumnStorageKey,

      fields,
      columns,
      searchParams,

      handleSearch,
      handleReset,

      saveSelectColumns,
      handleSelectColumn,

      inCommonUse,
      viewportSearchModel,
      advancedSearchRef,
      changeCommonUse,
      handleAdvancedSearch,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@src/assets/scss/common-list.scss";

.task-manage-list-container {

  .common-list-header__v2 {
    border-radius: 4px 4px 0 0 !important;

    .el-dropdown-link {
      color: $text-color-primary;
      cursor: pointer;
    }

    .set-field-btn {
      padding-left: 12px;
      margin-left: 12px;
      border-left: 1px solid $color-border-l1;

      .iconfont {
        font-size: $font-size-base;
        color: $text-color-regular;
        cursor: pointer;
      }
    }
  }

  .base-filter-tag-list-container {
    background: #fff;
    border-radius: 0 0 4px 4px;
    padding: 0 16px 16px;

    .base-filter-tag-list__tag {
      .iconfont {
        font-size: $font-size-small;
        color: $text-color-regular;
        margin-left: 4px;
      }
    }

    .custom-status-filter-container {
      margin-bottom: 12px;

      ::v-deep .el-checkbox-group {
        padding-left: 106px;
        display: flex;
        flex-wrap: wrap;

        .el-checkbox {
          max-width: 256px;
          height: 22px;
          padding: 0 12px;
          margin-right: 0;

          color: $text-color-secondary;
          font-size: 0;
          font-weight: normal;

          display: inline-flex;
          align-items: center;

          &__label {
            flex: 1;
            font-size: 13px;
            display: flex;
            overflow: hidden;

            span {
              flex: 1;
              @include text-ellipsis();
            }

            &:hover {
              color: $color-primary;
            }
          }
        }
      }
    }
  }

  &-content {
    flex: 1;
    overflow: hidden;
  }
}
</style>